<template>
  <div class="wrapper">
    <h1>组件间通信方式</h1>
    <h2>
      第一种父子组件之间的通信 ， 使用 prop从父级到子级， 使用$emit
      从子级传回到父级
    </h2>
    <div class="wrapper_showFMes">
      <Button type="primary" @click="openChild">传送数据到子级</Button>
      <child-component
        :message="message"
        :flag="flag"
        @closeModal="closeChild"
        @add="addStu"
      />
    </div>

    <div class="childCompon">
      <brother-compon ref="child" />
    </div>

    <div class="storeData">从store里拿数据: {{ data }}</div>
    <div>
      <h2>通过$refs 父组件调用子组件的方法，可以传递数据</h2>
      <Button @click="getMyEvent">点击父组件</Button>
    </div>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent'
import BrotherCompon from './BrotherCompon'
export default {
  data() {
    return {
      flag: false,
      message: '我是父组件的内容，请注意我现在闪现到子组件啦',
      fData: '',
      data: ''
    }
  },
  components: {
    ChildComponent,
    BrotherCompon
  },
  methods: {
    openChild() {
      this.flag = true
    },
    closeChild(flag) {
      this.flag = flag
    },
    addStu(data) {
      this.fData = data
      console.log(this.fData, 'data')
    },
    getMyEvent() {
      this.$refs.child.emitEvent(this.data)
    }
  },
  mounted() {
    this.data = this.$store.state.go
  }
}
</script>

<style scoped>
.childCompon {
  margin-top: 20px;
}
.storeData {
  margin-top: 30px;
  margin-bottom: 12px;
}
</style>
